/**
 * 经典文章列表
 */
.classic-view {
	position: relative;
	padding: 10px;
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;			   /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	&:before {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #e5e5e5;
	}
	&:first-child {
		&:before {
			display: none;
		}
	}
	&.is-touching {
		background-color: #e5e5e5;
	}
	.overlay-link {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99;
	}
	.entry-thumb {
		width: 100px;
		height: 80px;
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}
	.entry-content {
		position: relative;
		height: 80px;
		-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
		-moz-box-flex: 1;         /* OLD - Firefox 19- */
		-webkit-flex: 1;          /* Chrome */
		-ms-flex: 1;              /* IE 10 */
		flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
	}
	.entry-thumb + .entry-content {
		margin-left: 15px;
	}
	.entry-title {
		font-size: 15px;
		margin: 0;
		color: #333;
		line-height: 1.3;
		max-height: 60px;
		overflow: hidden;
	}
	.entry-meta {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		line-height: 1;
		> span {
			float: left;
			color: #999;
			font-size: 12px;
			line-height: 20px;
			height: 20px;
			margin-right: 5px;
		}
		.published-date {
			float: right;
			margin-right: 0;
		}
		.entry-cat {
			float: right;
			margin-top: 4px;
			margin-right: 0;
			padding: 0 10px;
			line-height: 16px;
			height: 16px;
			border-radius: 2px;
			color: #fff;
			background-color: #d8d8d8;
			&.cat-pk {
				background-color: $pk-color;
			}
			&.cat-story {
				background-color: $story-color;
			}
			&.cat-want {
				background-color: $want-color;
			}
			&.cat-vote {
				background-color: $vote-color;
			}
		}
	}
}

.ad-view {
	position: relative;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	margin: 20px 10px;
	img {
		width: 100%;
		height: auto;
	}
	.ad-title {
		font-size: 16px;
		color: #fff;
		position: absolute;
		left: 10px;
		right: 10px;
		bottom: 10px;
		margin: 0;
	}
	.overlay-link {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
/**
 * 人物列表
 */
.ember-view {
	position: relative;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	margin: 20px 10px;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.1);
	&.is-touching {
		box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 0 0 1px lighten($primary-color, 25%);
	}
	.entry-header {
		position: relative;
		width: 100%;
		height: 1px;
		padding-bottom: 70%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.entry-content {
		padding: 12px 10px 10px 10px;
		background-color: #fff;
		@include clearfix;
	}
	.entry-title {
		font-size: 18px;
		color: $primary-color;
		margin: 0 0 10px 0;
	}
	.entry-meta {
		margin-bottom: 15px;
	}
	.entry-pos {
		display: inline-block;
		font-size: 14px;
		color: #a6a3a3;
		line-height: 24px;
		height: 26px;
		padding: 0 15px;
		border: 1px solid #a6a3a3;
		border-radius: 13px;
		margin-right: 5px;
	}
	.entry-name {
		display: inline-block;
		font-size: 16px;
		color: #a6a3a3;
		line-height: 26px;
		height: 26px;
	}
	.entry-excerpt {
		font-size: 13px;
		color: #323232;
	}
	.overlay-link {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.entry-footer {
		background-color: #fff;
		font-size: 13px;
		color: #999;
		padding: 0 10px 5px 10px;
		@include clearfix;
		.fund-time {
			float: left;
			i {
				margin-right: 5px;
			}
		}
		.fund-cat {
			float: right;
		}
	}
}

.review-head {
	background-color: #fff;
	padding: 30px 20px 10px 115px;
	@include clearfix;
	.people-avatar {
		float: left;
		margin-left: -95px;
		width: 85px;
		text-align: center;
		height: 115px;
		img {
			display: block;
			width: 85px;
			height: 85px;
			margin-bottom: 8px;
			border-radius: 50%;
		}
	}
	.people-name {
		display: block;
		font-size: 16px;
		color: $primary-color;
		@include oneline;
	}
	.people-content {
		position: relative;
		float: left;
		width: 100%;
		height: 115px;
	}
	.people-title {
		font-size: 20px;
		margin: 0 0 10px 0;
		color: #8e8e8e;
	}
	.people-pos {
		display: inline-block;
		font-size: 14px;
		color: #a6a3a3;
		line-height: 24px;
		height: 26px;
		padding: 0 15px;
		border: 1px solid #a6a3a3;
		border-radius: 13px;
		margin-right: 0;
		max-width: 100%;
		@include oneline;
	}
	.people-meta {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		@include clearfix;
	}
	.people-review {
		float: left;
		color: #b2b2b3;
		font-size: 13px;
		line-height: 20px;
		height: 20px;
		padding-left: 20px;
		background: url(../images/coffee-icon.png) 0 center no-repeat;
		background-size: 20px 20px;
	}
	.people-comments {
		float: right;
		font-size: 13px;
		color: #fff;
		border-radius: 10px;
		line-height: 20px;
		padding: 0 10px;
		height: 20px;
		background-color: $primary-color;
	}
}
/**
 * 发现: 人物
 */
.people-view {
	position: relative;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	margin: 20px 10px;
	background-color: #fff;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.1);
	padding: 15px 15px 15px 110px;
	&.is-touching {
		box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 0 0 1px lighten($primary-color, 25%);
	}
	.people-avatar {
		float: left;
		margin-left: -95px;
		text-align: center;
		width: 85px;
		height: 115px;
		img {
			display: block;
			width: 85px;
			height: 85px;
			margin-bottom: 8px;
			border-radius: 50%;
		}
	}
	.people-name {
		display: block;
		font-size: 16px;
		color: $primary-color;
		@include oneline;
	}
	.people-content {
		position: relative;
		float: left;
		width: 100%;
		height: 115px;
	}
	.people-title {
		font-size: 16px;
		margin: 0 0 10px 0;
		color: #8e8e8e;
	}
	.people-pos {
		display: inline-block;
		font-size: 14px;
		color: #a6a3a3;
		line-height: 24px;
		height: 26px;
		padding: 0 15px;
		border: 1px solid #a6a3a3;
		border-radius: 13px;
		margin-right: 0;
		max-width: 100%;
		@include oneline;
	}
	.people-meta {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		@include clearfix;
	}
	.entry-meta {
		font-size: 13px;
		color: #999;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		@include clearfix;
		span {
			float: left;
			margin-right: 8px;
			i {
				margin-right: 3px;
			}
		}
	}
	.people-review {
		float: left;
		color: #999;
		font-size: 13px;
		/*
		line-height: 20px;
		height: 20px;
		padding-left: 20px;
		background: url(../images/coffee-icon.png) 0 center no-repeat;
		background-size: 20px 20px;
		*/
	}
	.people-comments {
		float: right;
		font-size: 13px;
		color: #fff;
		border-radius: 10px;
		line-height: 20px;
		padding: 0 10px;
		height: 20px;
		background-color: $primary-color;
	}
	.overlay-link {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/**
 * 活动列表
 */
.activity-view {
	position: relative;
	margin: 0 0 30px 0;
	height: 1px;
	padding-bottom: 50%;
	@include fullbg;
	overflow: hidden;
	.overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: linear-gradient(-180deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 60%, rgba(0,0,0,0.3) 85%, rgba(0,0,0,0.5) 100%);
	}
	&.is-touching {
		box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 0 0 1px lighten($primary-color, 25%);
	}
	.entry-title {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		text-align: center;
		margin: 0;
		font-size: 16px;
		color: #fff;
	}
	.overlay-link {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/**
 * 订单
 */
.order-view {
	position: relative;
	display: block;
	border-radius: 5px;
	overflow: hidden;
	margin: 20px 10px;
	background-color: #fff;
	box-shadow: 0 2px 0 0 rgba(0,0,0,0.1);
	padding: 15px 15px 10px 15px;
	&.is-touching {
		box-shadow: 0 2px 5px rgba(0,0,0,0.05), 0 0 0 1px lighten($primary-color, 25%);
	}
	.order-content {
		position: relative;
		padding-left: 95px;
		@include clearfix;
	}
	.people-avatar {
		float: left;
		margin-left: -95px;
		text-align: center;
		height: 115px;
		width: 85px;
		img {
			display: block;
			width: 85px;
			height: 85px;
			margin-bottom: 8px;
			border-radius: 50%;
		}
	}
	.people-name {
		display: block;
		font-size: 16px;
		color: $primary-color;
		@include oneline;
	}
	.people-content {
		position: relative;
		float: left;
		width: 100%;
		height: 115px;
	}
	.people-title {
		font-size: 20px;
		margin: 0 0 10px 0;
		color: #8e8e8e;
	}
	.people-pos {
		display: inline-block;
		font-size: 14px;
		color: #a6a3a3;
		line-height: 24px;
		height: 26px;
		padding: 0 15px;
		border: 1px solid #a6a3a3;
		border-radius: 13px;
		margin-right: 0;
		max-width: 100%;
		@include oneline;
	}
	.people-meta {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		@include clearfix;
	}
	.people-review {
		float: left;
		color: #b2b2b3;
		font-size: 13px;
		line-height: 20px;
		height: 20px;
		padding-left: 20px;
		background: url(../images/coffee-icon.png) 0 center no-repeat;
		background-size: 20px 20px;
	}
	.people-comments {
		float: right;
		font-size: 13px;
		color: #fff;
		border-radius: 10px;
		line-height: 20px;
		padding: 0 10px;
		height: 20px;
		background-color: $primary-color;
	}
	.top-meta {
		position: relative;
		margin-bottom: 5px;
		font-size: 13px;
		color: #909090;
		@include clearfix;
	}
	.overlay-link {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.order-status {
		font-size: 13px;
		margin-top: 5px;
		color: #676767;
		.state-success {
			color: #ff946e;
		}
	}
	.order-meta {
		margin-top: 5px;
		border-top: 1px solid #dfdfdf;
		padding-top: 8px;
		font-size: 13px;
		color: #adacac;
		@include clearfix;
		.state-success {
			color: #ff946e;
		}
		a {
			font-size: 13px;
			border: 1px solid #ccc;
			color: #555;
			padding: 3px 6px;
			border-radius: 2px;
			margin-left: 5px;
			&.state-danger {
				color: #e74c3c;
				border-color: #e74c3c;
			}
			&.state-primary {
				color: #e67e22;
				border-color: #e67e22;
			}
			&.state-info {
				color: #3498db;
				border-color: #3498db;
			}
		}
	}
}